<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:body>
	<ui:composition template="templates/common.xhtml">

		<ui:define name="pageTitle">Page d'accueil / moteur de recherche</ui:define>
		<ui:define name="pageHeader">Réservation</ui:define>

		<ui:define name="body">
		<div class="bs-docs-section">

		<div class="row">
		<div class="col-lg-7">
		
					<div class="well">

			<h:form id="searchEngineForm" class="bs-example form-horizontal">
			<fieldset>
				<legend>Recherche</legend>
				<p:panel id="form"  style="margin-top:10px;">
					
					<p:messages />
					
					<h:panelGrid columns="3">
				
						<h:outputLabel for="pays" value="Pays *" />
						<p:selectOneMenu  id="pays" value="#{searchEngineManagedBean.selectedPays}" required="true" label="Pays">
							<f:selectItem itemLabel="Sélectionnez un pays" itemValue="-1" />
							<f:selectItems value="#{searchEngineManagedBean.allPays}" />
							<p:ajax listener="#{searchEngineManagedBean.paysAjaxListener}" update="hotel" />
						</p:selectOneMenu>
						<p:message for="pays" display="icon" />

						<h:outputLabel for="hotel" value="Hôtel *" />
						<p:selectOneMenu id="hotel" value="#{searchEngineManagedBean.selectedHotel}" required="true" label="Hotel">
							<f:selectItem itemLabel="Sélectionnez un hôtel" itemValue="-1" />
							<f:selectItems value="#{searchEngineManagedBean.hotelItems}" />
						</p:selectOneMenu>
						<p:message for="hotel" display="icon" />

						<h:outputLabel for="dateDepart" value="Date départ *" />
						<p:calendar value="#{searchEngineManagedBean.dateDepart}" id="dateDepart" showOn="button" locale="fr" required="true" label="DateDepart" />
						<p:message for="dateDepart" display="icon" />

						<h:outputLabel for="dateArrive" value="Date arrivée *" />
						<p:calendar value="#{searchEngineManagedBean.dateArrive}" id="dateArrive" showOn="button" locale="fr" required="true" label="DateArrive" />
						<p:message for="dateArrive" display="icon" />
						
						<h:outputLabel for="nbChambre" value="Nombre de chambre" />
						<p:selectOneMenu id="nbChambre" value="#{searchEngineManagedBean.selectedNbChambre}">
							<f:selectItem itemLabel="1" itemValue="1" />
 							<f:selectItem itemLabel="2" itemValue="2" />
 							<f:selectItem itemLabel="3" itemValue="3" />
 							<p:ajax listener="#{searchEngineManagedBean.nbChambreAjaxListener}"
 								update="chambresBloc" />
 						</p:selectOneMenu>
 						<p:message for="nbChambre" display="icon" />
						
					</h:panelGrid>
					
					<h:panelGroup id="chambresBloc" rendered="true">
						
						<h:panelGroup id="chambre1Bloc" rendered="true">
							<h:outputLabel for="chambre1Capacite" value="Chambre 1 capacité" />
							<p:selectOneMenu id="chambre1Capacite"
								value="#{searchEngineManagedBean.chambre1Capacite}">
								<f:selectItems value="#{searchEngineManagedBean.allCapacite}" />
							</p:selectOneMenu>
							<p:message for="chambre1Capacite" display="icon" />
						</h:panelGroup>
						
						<h:panelGroup id="chambre2Bloc" rendered="#{searchEngineManagedBean.chambre2Bloc}" >
								<h:outputLabel for="chambre2Capacite" value="Chambre 2 capacité" />
								<p:selectOneMenu id="chambre2Capacite"
									value="#{searchEngineManagedBean.chambre2Capacite}">
									<f:selectItems value="#{searchEngineManagedBean.allCapacite}" />
								</p:selectOneMenu>
								<p:message for="chambre2Capacite" display="icon" />
						</h:panelGroup>
						
						<h:panelGroup id="chambre3Bloc" rendered="#{searchEngineManagedBean.chambre3Bloc}" >
							<h:outputLabel for="chambre3Capacite" value="Chambre 3 capacité" />
							<p:selectOneMenu id="chambre3Capacite"
								value="#{searchEngineManagedBean.chambre3Capacite}">
								<f:selectItems value="#{searchEngineManagedBean.allCapacite}" />
							</p:selectOneMenu>
							<p:message for="chambre3Capacite" display="icon" />
						</h:panelGroup>
	
					</h:panelGroup>
					
				</p:panel>
				<br/><br/>
				<h:commandButton class="btn btn-primary" value="Chercher" action="#{searchEngineManagedBean.search}" style="font-size:14px;padding-right:20px;padding-left:20px;"/>
</fieldset>
			</h:form>
			
			</div>
			</div>
</div></div>
		</ui:define>
	</ui:composition>
</h:body>
</html>